<template>
  <div class="app-container">

    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="仓库">
        <el-select v-model="searchObj.warehouseId" placeholder="选择仓库">
          <el-option v-for="warehouse in warehouseList" :key="warehouse.id" :value="warehouse.id" :label="warehouse.name"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="searchObj.stockId" placeholder="库存id"/>
      </el-form-item>

      <el-form-item>
        <el-input v-model="searchObj.goodsId" placeholder="商品id"/>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
        <!--  导出  -->
        <el-button type="primary"><a href="http://localhost:9000/zukeApi/product/stock/exportData" style="text-decoration: none;color: white" target="_blank"> 导出库存表</a></el-button>
        <router-link :to="'/goods-addStock/'">
          <el-button type="primary" >添加库存</el-button>
        </router-link>
      </el-form-item>

    </el-form>

    <!-- banner列表 -->
    <el-table v-loading="listLoading" :data="list"
              border
              fit
              highlight-current-row>

      <el-table-column prop="id" label="库存id"/>
      <el-table-column prop="supplier" label="供应商"/>
      <el-table-column prop="goodsName" label="商品名称"/>
      <el-table-column prop="num" label="库存数量"/>
      <el-table-column prop="price" label="进价"/>
      <el-table-column prop="warehouseName" label="仓库名"/>
      <el-table-column prop="warehouseLoc" label="仓库地址"/>

      <el-table-column label="操作" width="230" align="center">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="handleStockEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleStockDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      style="padding: 30px 0; text-align: center;"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      @current-change="fetchData"
      @size-change="changeSize"
    />

    <!--  编辑按钮弹出层  -->
    <el-dialog
      title="修改库存"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

      <el-form ref="stock" :model="stock" label-width="80px" >

        <el-form-item label="库存id">
          <el-input v-model="stock.id" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="仓库">
          <el-select v-model="stock.warehouseId" placeholder="选择仓库">
            <el-option v-for="warehouse in dialogWarehouseList" :key="warehouse.id" :value="warehouse.id" :label="warehouse.name"/>
          </el-select>
        </el-form-item>

        <el-form-item label="商品id">
          <el-input v-model="stock.goodsId" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="库存数量">
          <el-input v-model="stock.num"></el-input>
        </el-form-item>

        <el-form-item label="供应商名">
          <el-input v-model="stock.supplier"></el-input>
        </el-form-item>

        <el-form-item label="供应商电话">
          <el-input v-model="stock.tel"></el-input>
        </el-form-item>

        <el-form-item label="进价">
          <el-input v-model="stock.price"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button @click="closeEditStock()">取 消</el-button>
      <el-button type="primary" @click="EditStock()">确 定</el-button>
    </span>

    </el-dialog>



  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "stock",
  data(){
    return{
      listLoading: true, // 数据是否正在加载
      list: null, // banner列表
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 5, // 每页记录数
      searchObj: {  // 查询表单对象
        stockId: null,
        warehouseId: null,
        goodsId: null
      },
      warehouseList:null,
      stock: {},
      dialogVisible: false,
      dialogWarehouseList: null
    }
  },
  created() {
    this.fetchData(1)
  },
  methods:{
    // 库存列表
    fetchData(page = 1) {
      this.page = page
      this.$http({
        url: this.$http.adornUrl(`/product/stock/list/${page}/${this.limit}`),
        method: 'get',
        params: this.searchObj
      }).then(({data}) => {
        this.list = data.data.records
        this.total = data.data.total
        this.listLoading = false
        this.warehouseList = data.warehouseList
      })
    },
    // 页码切换
    changeSize(val) {
      this.limit = val
      this.page = 1
      this.fetchData(1)
    },
    // 重置查询表单
    resetData() {
      this.searchObj = {}
      this.fetchData()
    },
    handleStockEdit(id){
      this.$http({
        url: this.$http.adornUrl(`/product/stock/getStockById/${id}`),
        method: 'get'
      }).then((res) => {
        this.stock = res.data.stock
        this.dialogWarehouseList = (this.warehouseList).slice(1)
        this.dialogVisible = true

      })
    },
    handleStockDelete(id){
      this.$confirm(`确定对  ${id}  号库存删除？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/product/stock/deleteById'),
          method: 'post',
          data: this.$http.adornData(id, false)
        }).then(({data}) => {
          if (data && data.code === 200) {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.fetchData(this.page)
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      }).catch(() => {
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.goods = {}
          done();
        })
        .catch(_ => {
        });
    },
    closeEditStock() {
      this.dialogVisible = false
      this.goods = {}
    },
    // 提交编辑
    EditStock() {
      this.$http({
        url: this.$http.adornUrl('/product/stock/updateStock'),
        method: 'post',
        data: this.stock
      }).then(({data})=>{
        if (data && data.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.fetchData(this.page)
            }
          })
        } else {
          this.$message.error(data.msg)
        }
        this.dialogVisible = false
      })
    },
  }
}
</script>

<style scoped>

</style>
